<template>
  <div class="flex-main">
    <div class="flex-body">
      <div class="flex-main" style="height:100%;">
        <div class="flex-body">
          <div class="m-carttop">
            <div>
              <strong>购物车</strong>
              <p>共{{total}}件宝贝</p>
            </div>
            <div v-if="!isdel" @click="delEvent()">
              <span>管理</span>
            </div>
            <div v-else>
              <span @click="delElement">删除</span>
              <span class="ml" @click="delEvent()">完成</span>
            </div>
          </div>
          <div class="m-cartlist">
              <no-data v-if="cartlist.length<1"></no-data>
            <cart-item v-else
              class="mb"
              v-for="(item,index) in cartlist"
              :key="index"
              :cartitem="item"
              @chooseItem="chooseItem"
              @addQuantity="addQuantity"
              @minusQuantity="minusQuantity"
            ></cart-item>
          </div>
        </div>
        <div class="flex-bottom">
          <div class="m-cart-foot">
            <div>
              <img class="m-cartIcon" v-if="isChoose" src="@/assets/images/cart-choosed@2x.png" alt>
              <!-- 选中 -->
              <img class="m-cartIcon" v-else src="@/assets/images/chooseGray_2@2x.png" alt>
              <!-- 未选中 -->
              全选
            </div>
            <div class="m-amount">
              <span>合计：
                <em>{{total_count}}</em>
              </span>
              <span class="m-jiesuan" @click="toJiesuan">结算</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer-nav class="flex-bottom"></footer-nav>
  </div>
</template>
<script>
import { cartList,deleteCart } from "@/api/views";
import { mapActions } from 'vuex'
export default {
  name: "",
  data() {
    return {
      isdel: false, //管理or删除
      isChoose: false,
      pageNo: 1, //分页
      cartlist: [], //列表数据
      chooseLen: 0, //选中的个数
      chooseCartIds:[],    //选中的购物车数据ids
      chooseCart:[],    //选中的购物车数据
      buydata:[],
      total_count:0.00,    //总金额
      total:0,    //购物车总数
    };
  },
  components: {
    cartItem: () => import("@/model/cart/cart_item")
  },
  methods: {
      ...mapActions([
            'actionBuydata',
        ]),
    // 删除/管理  显示切换
    delEvent() {
      let isdel = this.isdel;
      this.isdel = !isdel;
    },
    // 删除事件
    delElement() {
        let chooseCart = this.chooseCart;
        let cartlist = this.cartlist;       //购物车列表
        let chooseCartIds = this.chooseCartIds;   //选中的购物车数据ids
        if(chooseCart.length<1){
            this.$toast('请选择需要删除的购物车数据');
            return false;
        }
        let param = {
            Ids: chooseCartIds.join(','),
            customer_id:this.$utils.uid
        }
        
        deleteCart(param).then(result=>{
            this.$toast('删除成功');
            for (const delCart of chooseCart) {
                console.log(delCart);
                for (const key in cartlist) {
                    if(cartlist[key].id == delCart){
                        cartlist.splice(key,1);     //删除对应数据
                    }
                }
            }
                this.cartlist = cartlist;
            // setTimeout(() => {
            //     this.$router.go(0);     //刷新当前页面
            // }, 500);
            
        }).catch(error=>{})
    },
    // 获取购物车列表
    getCartList() {
      let that = this;
      this.$indicator.open('加载中...');
      let param = {
        page: that.pageNo,
        list_rows: 10,
        customer_id: that.$utils.uid
      };
      cartList(param)
        .then(result => {
            this.$indicator.close();
          let data = result.list.data;
          for (const key in data) {
            data[key].isChoose = false;
          }
          that.cartlist = data;
          that.$indicator.close();
          that.total = result.total;    //购物车总数
        })
        .catch(err => {
          that.$indicator.close();
        });
    },
    // 单个是否选中事件
    chooseItem(data) {
      let cart = data; //选中的单个数据
      let chooseCartIds = this.chooseCartIds;     //选中的购物车id，用于删除数据
      let chooseCart = this.chooseCart;           //选中的购物车数据
      let chooseLen = this.chooseLen; //是否全选中
      let buydata = this.buydata; //数据存放的数组
      let total_count = this.total_count;   //总金额
      if (cart.isChoose) {
        chooseLen++;
        buydata.push({ Id: cart.goods_id, type: cart.type, quantity: cart.quantity });
        chooseCartIds.push(cart.id);
        chooseCart.push(cart);
        total_count +=parseFloat(cart.price) * parseFloat(cart.quantity);
      } else {
        chooseLen--;
        for (const key in buydata) {
            if(buydata[key].Id==cart.goods_id){
                buydata.splice(key,1);      //数组删除元素
                chooseCart.splice(key,1);
            }
            if(chooseCartIds[key] == cart.goods_id){
                chooseCartIds.splice(key,1);      //数组删除元素
            }
        }
        total_count -=parseFloat(cart.price) * parseFloat(cart.quantity);
      }
      if (chooseLen == this.cartlist.length) {
        this.isChoose = true;
      } else {
        this.isChoose = false;
      }
      this.chooseLen = chooseLen;
      this.buydata = buydata;
      this.chooseCart = chooseCart;
      this.chooseCartIds = chooseCartIds;
      this.total_count = total_count;
    },
    // 增加数量
    addQuantity(cart){
      // console.log(cart);
      let total_count = 0;    //计算总金额
      let chooseCart = this.chooseCart;   //选中的购物车数据
      
      for (let i = 0; i < chooseCart.length; i++) {
        const element = parseFloat(chooseCart[i].quantity) * parseFloat(chooseCart[i].price);
        total_count += element;
      }
      this.total_count = total_count;
    },
    // 减少数量
    minusQuantity(cart){
      let chooseCart = this.chooseCart;   //选中的购物车数据
      let total_count = 0;    //计算总金额
      for (let i = 0; i < chooseCart.length; i++) {
        const element = parseFloat(chooseCart[i].quantity) * parseFloat(chooseCart[i].price);
        total_count += element;
      }
      this.total_count = total_count;
    },
    // 去结算
    toJiesuan() {
        let buyData = this.buydata;
        if(buyData.length==0){
            this.$toast('请选择购物车商品');
            return false;
        }
        this.actionBuydata(buyData);        //存到store中
        this.$router.push({name:'payment'});
    }
  },
  mounted() {
    this.$indicator.open("加载中...");
    this.getCartList();
  }
};
</script>
<style lang="less" scoped src="@/less/cart/cart.less"></style>
